<template>
	<view class="sec-body">
		<view class="fiexd-top">
			<view class="left-part">
				<label class="my-label">日期</label>
				<text>{{startDate}}</text>
				<text class="divider"> - </text>
				<text>{{endDate}}</text>
				<label class="my-label"> </label>
				<text>{{SNWTXT}}</text>
			</view>
			<view class="filter" @tap="showPopup">筛选 <uni-icon :class="active?'rotateArrow':''" type="arrowdown" size="16"></uni-icon>
			</view>
		</view>

		<luPopupWrapper ref="luPopupWrapper" class="my-lu-popup" type="top" transition="slider" backgroundColor="#fff" width='100%'
		 height="100%" :top="luTop" :active="active" popupId="my-popup1" :maskShow="true" :maskClick="true">
			<view class="content">
				<form class="uni-form">
					<view class="uni-form-item uni-column">
						<label class="title">开始日期</label>
						<view class="uni-input" :value="form.startDate" @click="onShowDatePicker('startDate')">{{form.startDate}}</view>
					</view>
					<view class="uni-form-item uni-column">
						<label class="title">结束日期</label>
						<view class="uni-input" :value="form.endDate" @click="onShowDatePicker('endDate')">{{form.endDate}}</view>
					</view>
					<view class="uni-form-item uni-column">
						<radio-group @change="setFlag">
							<label class="radio">
								<radio name="SNW_FLAG" value="1" :checked="form.SNW_FLAG==1" />省内</label>
							<label class="radio">
								<radio name="SNW_FLAG" value="2" :checked="form.SNW_FLAG==2" />省外</label>
						</radio-group>
					</view>
					<mx-date-picker :show="showPicker" type="date" format="yyyy-mm-dd" @confirm="onSelected" @cancel="onCancel" />

				</form>

				<view class="button-group">
					<button class="mini-btn" type="default" size="mini" @tap="closePopup">关闭</button>
					<button class="mini-btn margin-left-btn" type="primary" size="mini" @tap="confirmPopup">确定</button>
				</view>
			</view>
		</luPopupWrapper>



		<!-- 内容 -->
		<scroll-view class="uni-scroll-view-list sec-uni-scroll-view-list" scroll-y lower-threshold="50" @scrolltolower="loadMore">

			<view class="my-collapse" v-if="listArr.length">
				<view class="my-collapse-item" v-for="(item,index) in listArr" :key="index">
					<view class="item-top">
						<view class="item-left  item-line">
							<view class="title">
								<view>
									<label class="item-label">姓名</label>
									<text>{{item.AAC003}}</text>
								</view>
								<view>
									<label class="item-label">备案号</label>
									<text>{{item.AAZ267}}</text>
								</view>
							</view>
							<view>
								<label class="item-label">医院名称</label>
								<text>{{item.AKB021}}</text>
							</view>
							<view>
								<label class="item-label">申报日期</label>
								<text>{{item.AAE127}}</text>
							</view>
						</view>
						<view class="item-right">
							<uni-tag type="default" text="未审核" v-if="item.AAE016 ==0"></uni-tag>
							<uni-tag type="success" text="通过" v-else-if="item.AAE016 ==1"></uni-tag>
							<uni-tag type="warning" text="驳回" v-else></uni-tag>
							<view class="arrow-wrap" @tap="changeShow(item,index)">
								<uni-icon class="my-arrow-down my-arrow-down2" :class="item.expand?'rotateArrow':''" type="arrowdown"></uni-icon>
							</view>
						</view>
					</view>

					<!-- #ifdef H5 -->
					<view class="item-bottom" :class="{'item-bottom-open':item.expand,'item-bottom-fj':item.IS_FJ&&item.imageArr.length}">
						<view class="edit" v-if="item.AAE016!='1'&&item.expand" @tap="modifyItem(item)">
							<view class="touch-img">
								<image src="../../static/image/edit.png" mode="widthFix" style="width:42upx;"></image>
							</view>
						</view>
						<view class=" item-line">
							<view class="result-line"><label>身份证号</label><text class="result-text">{{item.AAC002}}</text></view>
							<view class="result-line"><label>社保卡号</label><text class="result-text">{{item.AAZ500}}</text></view>
							<view class="result-line"><label>联系人</label><text class="result-text">{{item.AAE004}}</text></view>
							<view class="result-line"><label>联系电话</label><text class="result-text">{{item.AAE005}}</text></view>
							<view class="result-line"><label>参保地行政区划</label><text class="result-text">{{item.AKC803_NAME}}</text></view>
							<view class="result-line"><label>就医地行政区划</label><text class="result-text">{{item.AKC801_NAME}}</text></view>
							<view class="result-line"><label>待遇开始日期</label><text class="result-text">{{item.AAE030}}</text></view>
							<view class="result-line"><label>待遇终止日期</label><text class="result-text">{{item.AAE031}}</text></view>
							<view class="result-line"><label>险种大类</label><text class="result-text">{{item.AAE140_NAME}}</text></view>

							<view class="result-line"><label>人员类别</label><text class="result-text">{{item.AKA085_NAME}}</text></view>
							<scroll-view class="result-fj" scroll-x="true">
								<view class="image-item-a" v-for="(image,imgIndex) in item.imageArr" :key="imgIndex">
									<image style="width: 100%;height: 100%;" :data-index="imgIndex" :src="image.FJINFO" mode="scaleToFill" @tap="lookStaffs(item.imageArr,imgIndex)"></image>
									<view class="title">{{image.BACL_NAME}}</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<!-- #endif -->

					<!-- #ifdef APP-PLUS || MP -->
					<view class="item-bottom" :class="{'item-bottom-open':item.expand,'item-bottom-fj':item.IS_FJ}">
						<view class="edit" v-if="item.AAE016!='1'&&item.expand" @tap="modifyItem(item)">
							<view class="touch-img">
								<image src="../../static/image/edit.png" mode="widthFix" style="width:42upx;"></image>
							</view>
						</view>
						<view class=" item-line">
							<view class="result-line"><label>身份证号</label><text class="result-text">{{item.AAC002}}</text></view>
							<view class="result-line"><label>社保卡号</label><text class="result-text">{{item.AAZ500}}</text></view>
							<view class="result-line"><label>联系人</label><text class="result-text">{{item.AAE004}}</text></view>
							<view class="result-line"><label>联系电话</label><text class="result-text">{{item.AAE005}}</text></view>
							<view class="result-line"><label>参保地行政区划</label><text class="result-text">{{item.AKC803_NAME}}</text></view>
							<view class="result-line"><label>就医地行政区划</label><text class="result-text">{{item.AKC801_NAME}}</text></view>
							<view class="result-line"><label>待遇开始日期</label><text class="result-text">{{item.AAE030}}</text></view>
							<view class="result-line"><label>待遇终止日期</label><text class="result-text">{{item.AAE031}}</text></view>
							<view class="result-line"><label>险种大类</label><text class="result-text">{{item.AAE140_NAME}}</text></view>

							<view class="result-line"><label>人员类别</label> <text class="result-text">{{item.AKA085_NAME}}</text></view>
							<scroll-view class="result-fj" scroll-x="true">
								<view class="image-item-a" v-for="(image,imgIndex) in item.imageArr" :key="imgIndex">
									<image style="width: 100%;height: 100%;" :data-index="imgIndex" :src="image.FJINFO" mode="scaleToFill" @tap="lookStaffs(item.imageArr,imgIndex)"></image>
									<view class="title">{{image.BACL_NAME}}</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<!-- #endif -->


				</view>
			</view>
			<uni-load-more v-if="listArr.length" :status="status" :contentText="contentTxt"></uni-load-more>
			<view v-if="!listArr.length" style="padding:100upx 16upx;text-align: center;">
				<image src="../../static/image/order.png" mode="widthFix" style="width:180upx;"></image>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	import luPopupWrapper from "@/components/lu-popup-wrapper/lu-popup-wrapper.vue";
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";

	export default {
		components: {
			uniTag,
			uniLoadMore,
			uniCollapse,
			uniCollapseItem,
			uniIcon,
			luPopupWrapper,
			MxDatePicker
		},
		data() {
			const nowDate = new Date();
			const cloneNowDate = new Date();
			const fullYear = nowDate.getFullYear();
			const month = nowDate.getMonth() + 1; // getMonth 方法返回 0-11，代表1-12月
			const endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天

			const firstDay = this.$common.getDate(cloneNowDate.setDate(1))
			const lastDate = this.$common.getDate(cloneNowDate.setDate(endOfMonth))
			return {
				showPicker: false,
				inputName: 'startDate',
				luTop: '36px',
				active: false,
				startDate: firstDay,
				endDate: lastDate,
				SNWTXT: '',
				form: {
					startDate: firstDay,
					endDate: lastDate,
					SNW_FLAG: ''
				},
				listArr: [],
				AAC002: '',
				AAZ500: '',
				AAC003: '',
				AKC803: '',
				AAE140: '',
				AKA085: '',
				pageIndex: 1,
				totalPage: 1,
				status: 'more',
				contentTxt: {
					contentdown: "查看更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多",
				}
			}
		},
		methods: {
			lookStaffs(imgArr, imgIndex) {
				var previewArr = _.map(imgArr, 'FJINFO');

				uni.setStorageSync("imgArr", previewArr);

				uni.navigateTo({
					url: '../previewImage/previewImage?index=' + imgIndex
				})
			},
			modifyItem(item) {
				let cloneObj = JSON.parse(JSON.stringify(item));
                delete cloneObj.imageArr
				uni.setStorageSync('ItemInfo', cloneObj);
				var SNW_FLAG = item.AKC801.indexOf('62') != -1 ? '1' : '2';
				uni.navigateTo({
					url: '../dengji2/dengji1?BG_FLAG=2&formType='+item.AKA085+'&SNW_FLAG='+SNW_FLAG
				});
			},
			changeShow(item, index) {
				const self = this;
				item.expand = !item.expand;
				if (item.IS_FJ == 1 && item.expand) {
					if(!item.imageArr.length){
						self.$request('S1018', {
							AAZ267: item.AAZ267,
							AAC002: item.AAC002
						}, 'POST', function(res) {
							console.log(res);
							if (res.data.CODE == '0') {
								item.imageArr = res.data.DATA;
								// self.$set(self.listArr[index],'imageArr',res.data.DATA);
								//console.log(self.listArr[index])
							}
							console.log(item)
						})
					}



				}
			},
			setFlag(evt) {
				var type = evt.target.value;
				if (type == '1') {
					this.SNWTXT = "省内";
				} else {
					this.SNWTXT = "省外";
				}
				this.form.SNW_FLAG = type;
			},
			confirmPopup() {
				if (!this.form.startDate || !this.form.endDate) {
					uni.showToast({
						title: '请选择日期',
						image: '../../static/image/info.png',
						duration: 2500
					});
					return false;
				}
				this.startDate = this.form.startDate
				this.endDate = this.form.endDate
				this.closePopup();
				this.pageIndex = 1;
				this.listArr = [];
				this.getData();
			},
			closePopup() {
				this.active = false;
				this.$refs.luPopupWrapper.close();
			},
			showPopup() {
				if (!this.active) {
					this.active = true;
					this.$refs.luPopupWrapper.show();
				}
			},
			onShowDatePicker(type) {
				this.showPicker = true;
				this.inputName = type;
			},
			onSelected(e) { //选择
				this.showPicker = false;
				if (e) {
					this.form[this.inputName] = e.value
				}
			},
			onCancel(e) {
				this.showPicker = false;
			},

			loadMore(e) {
				if (this.pageIndex < this.totalPage) {
					this.pageIndex++;
					if (this.pageIndex > this.totalPage) {
						this.pageIndex = this.totalPage;
					}
					this.getData();

				}
			},
			getData() {
				var self = this;
				this.status = 'loading';
				this.$request('S1002', {
					BTIME: this.form.startDate.replace(/-/g, ""),
					ETIME: this.form.endDate.replace(/-/g, ""),
					AAC002: this.AAC002,
					AAZ500: this.AAZ500,
					AAC003: this.AAC003,
					AKC803: this.AKC803,
					AAE140: this.AAE140,
					AKA085: this.AKA085,
					PAGENUM: this.pageIndex,
					SNW_FLAG: this.form.SNW_FLAG,
					PAGESIZE: 10
				}, 'POST', function(res) {
					if (res.data.CODE == '0') {
						for (var i = 0; i < res.data.DATA.length; i++) {
							self.$set(res.data.DATA[i], 'expand', false);
							self.$set(res.data.DATA[i], 'imageArr', []);
						}
						self.listArr = self.listArr.concat(res.data.DATA);


						self.totalPage = res.data.PAGESIZECOUNT;
						if (self.pageIndex == self.totalPage) {
							self.status = 'noMore'
						} else {
							self.status = 'more'
						}
					}
				})
			}
		},
		onLoad(param) {
			var userInfo = uni.getStorageSync('userInfo');
			this.AAZ500 = userInfo.AAZ500;
			this.AAC002 = userInfo.AAC002;
			this.AAC003 = userInfo.AAC003;
			this.AKC803 = userInfo.AKC803;
			this.AAE140 = userInfo.AAE140;
			this.getData();
		},
		onShow() {
			// #ifdef H5
			this.luTop = '80px';
			// #endif

			// #ifdef APP-PLUS || MP
			this.luTop = '36px';
			// #endif


		}
	}
</script>
<style lang="scss">
	.item-bottom.item-bottom-open .edit {
		position: absolute;
		top: -20px;
		right: -20px;
	}

	.touch-img {
		box-sizing: border-box;
		display: flex;
		flex-direction: column-reverse;
		width: 100upx;
		height: 100upx;
		padding: 15upx;
		border-radius: 50%;
		background-color: rgba(0, 200, 0, 0.7);
	}

	.image-wrap {
		padding: 10upx 20upx 30upx;
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.image-item {
		position: relative;
		width: 180upx;
		height: 240upx;
		margin-top: 30upx;
		margin-left: 30upx;
		margin-right: 30upx;
	}

	.image-item .title {
		box-sizing: border-box;
		position: absolute;
		bottom: 20upx;
		left: 0;
		z-index: 99;
		width: 100%;
		height: 20upx;
		background: #333333;
		display: flex;
		justify-content: flex-end;
		padding-right: 2upx;
		overflow: hidden;
		transition: height 0.5s ease;
	}
</style>
